<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用选择器</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            // console.log($("#p1"));
            // console.log($(".c1"));
            // console.log($("p"));
            // console.log($("*"));
            // console.log($("#p1,.c1"));
            // console.log($(".c2 span"));
            // console.log($(".c2>span"));
            // console.log($(".c3+span"));
            // console.log($(".c3~span"));
            // console.log($("div[name='admin']"));
            // E:first  查找符合选择器E规则的第一个元素
            // console.log($("li:first"))
            // E:last  查找符合选择器E规则的最后一个元素
            // console.log($("li:last"))
            // 奇偶选择器
            // E:odd    查询所有符合选择器E规则的第奇数个元素
            // 查找的所有元素的索引从0开始,0是偶数
            console.log($("li:odd"))
            // E:even    查询所有符合选择器E规则的第偶数个元素
            console.log($("li:even"))
        });
    </script>
</head>
<body>
<p id="p1">这是第1个段落</p>
<p id="p2" class="c1">这是第2个段落</p>
<p id="p3" class="c1">这是第3个段落</p>
<p id="p4" class="c1">这是第4个段落</p>
<p id="p5">这是第5个段落</p>
<div class="c1">这是一个div</div>
<hr>
<div class="c2">
    <div>
        <span>这是c2的子元素的子元素</span>
    </div>
    <span>这是c2的子元素</span>
</div>
<hr>
<div class="c3">这是c3</div>
<span>这是c3后的span</span><br>
<span>这是c3后的span</span><br>
<span class="c3">这是c3的span</span><br>
<span>这是c3后的span</span><br>
<div name="admin">这是admin的div</div>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
</body>
</html>